<template>
  <div id="app">
    <h1>state</h1>
    <mark>===={{$store.state.age}}===</mark>

    <h1>getters</h1>
    <mark>===={{$store.getters.myAge}}===</mark>
    <mark>===={{$store.getters.myAge}}===</mark>
    <mark>===={{$store.getters.myAge}}===</mark>

    <h1>actions/mutations</h1>
    <p>
      <button @click="syncAdd">同步</button>
      <button @click="asyncMinus">异步</button>
      <button @click="errHandler">strict: true, 下更新状态</button> 
    </p>

    <h1>modules</h1>
    <p>moduleA: {{$store.state.a}}</p>
    <p>moduleB: {{$store.state.b}}</p>
    <p>moduleC: {{$store.state.b.c}}</p>
    <p>moduleD: {{$store.state.b.c.d}}</p>
    <h1>modules > actions/mutations</h1>
    <p>
      <button @click="syncAddmodules">a 同步</button>
      <button @click="asyncMinusmodules">b 异步</button> 
    </p>
    <h1>modules > 动态注册的模块，store.registerModule</h1>
    <p>动态注册的moduleFF的 state: {{$store.state.ff}}</p>
    <p>动态注册的moduleFF的 getters: {{$store.getters.myA}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    errHandler() {
      // 不建议这样修改，如果 vuex 配置 strict: true, 严格模式就会警告，直接 commit 到 mutations 或者 dispatch 到 actions
      this.$store.state.age += 1;
    },
    syncAdd() {
      // console.log('syncAdd');
      // 不建议这样修改，如果 vuex 配置 strict: true, 严格模式就会警告，直接 commit 到 mutations 或者 dispatch 到 actions
      // this.$store.state.age += 1;
      
      this.$store.commit('syncAdd', {age: 1})
      this.$store.dispatch('syncAdd', {age: 1})
    },
    asyncMinus() {
      // console.log('asyncMinus');
      // 不建议这样修改，如果 vuex 配置 strict: true, 严格模式就会警告，直接 commit 到 mutations 或者 dispatch 到 actions
      // this.$store.state.age -= 1; 

      this.$store.commit('asyncMinus', {age: 1})
      this.$store.dispatch('asyncMinus', {age: 1})
    },
    syncAddmodules() {
      // console.log('syncAddmodules');
      // 不建议这样修改，如果 vuex 配置 strict: true, 严格模式就会警告，直接 commit 到 mutations 或者 dispatch 到 actions
      // this.$store.state.age += 1;
      
      this.$store.commit('a/syncAdd', {age: 1})
      this.$store.dispatch('a/syncAdd', {age: 1})
    },
    asyncMinusmodules() {
      // console.log('asyncMinus');
      // 不建议这样修改，如果 vuex 配置 strict: true, 严格模式就会警告，直接 commit 到 mutations 或者 dispatch 到 actions
      // this.$store.state.age -= 1; 

      this.$store.commit('b/asyncMinus', {age: 1})
      this.$store.dispatch('b/asyncMinus', {age: 1})
    }
  }
}
</script>

<style>
</style>
